import React from 'react'
import { connect } from 'react-redux'
import ListTable from 'components/ListTable'
import ReactLoading from 'react-loading'
import getDatasetPageInfo from 'graphql/project/dataset/datasetPageInfo.graphql'
import getDatasets from 'graphql/project/dataset/datasetList.graphql'
import syncDataset from 'graphql/project/dataset/syncDataset.graphql'
import deleteProjectDataset from 'graphql/project/dataset/deleteDataset.graphql'
import Icons from 'utils/constents/icons'
import { listTable as listTableDuck } from 'ducks'
import { OptionImage } from 'components/memberTable'
import { Popup } from 'semantic-ui-react'
import { Mutation } from 'react-apollo'
import moment from 'moment'

const FileList = actionInit => ({ data }) => {
  const makeOpt = id => [
    {
      src: Icons.DELETE,
      text: '删除',
      action: () => actionInit({
        graphqlAction: deleteProjectDataset,
        submitValues: { id },
        icon: 'trash alternate',
        title: ' 删除项目数据集',
        message: '请注意：删除项目数据集会同时删除对应的任务和对应的已经创建的标注',
      }),
    },
  ]
  return (
    <React.Fragment>
      {data.project_dataset.map(dataset => (
        <ListTable.Row hasCheckBox>
          <ListTable.Cell>{dataset.dataset_object.name}</ListTable.Cell>
          <ListTable.Cell>{dataset.update_at}</ListTable.Cell>
          <ListTable.Cell>
            {`${dataset.item_array_aggregate.aggregate.count} / ${
              dataset.dataset_object.item_array_aggregate.aggregate.count
            }`}
          </ListTable.Cell>
          <ListTable.Cell>
            {dataset.state === 'sync' && (
              <ReactLoading color="#21ba45" height={30} width={25} type="bars" />
            )}
            {dataset.state === 'normal'
              && dataset.item_array_aggregate.aggregate.count
                !== dataset.dataset_object.item_array_aggregate.aggregate.count && (
                <Mutation mutation={syncDataset}>
                  {(updateTodo, { loading, error, data }) => {
                    if (loading) {
                      return <ReactLoading color="#21ba45" height={30} width={25} type="bars" />
                    }
                    return (
                      <Popup
                        trigger={(
                          <OptionImage
                            className="options"
                            src="https://img.icons8.com/color/2x/recurring-appointment.png"
                            onClick={() => updateTodo({
                              variables: {
                                projectDatasetId: dataset.id,
                                updateAt: moment().format(),
                              },
                            })
                            }
                          />
)}
                        content="同步数据集"
                        inverted
                      />
                    )
                  }}
                </Mutation>
            )}
          </ListTable.Cell>
          <ListTable.Action width={2} options={makeOpt(dataset.id)} />
        </ListTable.Row>
      ))}
    </React.Fragment>
  )
}

const ProjectDataset = ({ match, project, actionOpen }) => {
  const RenderList = FileList(actionOpen)
  const inviteUrl = `${match.url}/add`
  const { projectId } = project
  return (
    <ListTable
      subscription
      globalActions={[
        {
          text: '添加数据集',
          url: inviteUrl,
        },
      ]}
      search={{ text: '搜索项目' }}
      pagination={{
        query: getDatasetPageInfo,
        name: 'project_dataset_aggregate',
        variables: {
          projectId,
        },
      }}
      listData={{
        query: getDatasets,
        variables: {
          projectId,
          limit: 10,
        },
        header: (
          <ListTable.Header hasCheckBox>
            <ListTable.HeaderCell>数据集名称</ListTable.HeaderCell>
            <ListTable.HeaderCell>最后同步时间</ListTable.HeaderCell>
            <ListTable.HeaderCell>已同步文件数</ListTable.HeaderCell>
            <ListTable.HeaderCell />
            <ListTable.HeaderCell />
          </ListTable.Header>
        ),
        render: <RenderList />,
      }}
      holder={{
        description: '没有任何数据集',
        action: {
          text: '创建数据集',
          url: inviteUrl,
        },
      }}
    />
  )
}

const mapDispatchToProps = {
  actionOpen: listTableDuck.creators.actionOpen,
}

export default connect(
  null,
  mapDispatchToProps,
)(ProjectDataset)
